<template>
    <el-dialog @open="dialogOpen" @closed="dialogClose" v-model="dialogFormVisible" :title="props.title">
        <el-form :model="dialogForm" ref="dialogFormRef">
            <el-form-item label="上传头像"  prop="headimgurl">
                <s-upload v-model="dialogForm.headimgurl"></s-upload>
            </el-form-item>
            <el-form-item label="姓名" required prop="name" :rules="[{ required:true,message:'请输入姓名'}]" >
                <el-input v-model="dialogForm.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="班级" required prop="class" :rules="[{ required:true,message:'请输入班级'}]" >
                <el-input v-model="dialogForm.class" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" required prop="age" :rules="[{ required:true,message:'请输入年龄'}]" >
                <el-input v-model="dialogForm.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="城市" required prop="city" :rules="[{ required:true,message:'请输入城市'}]" >
                <el-input v-model="dialogForm.city" autocomplete="off" />
            </el-form-item>
            <el-form-item label="学历" required prop="degree" :rules="[{ required:true,message:'请输入学历'}]" >
                <el-input v-model="dialogForm.degree" autocomplete="off" />
            </el-form-item>
            <el-form-item label="项目地址" required prop="productUrl" :rules="[{ required:true,message:'请输入项目地址'}]" >
                <el-input v-model="dialogForm.productUrl" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述" required prop="description" :rules="[{ required:true,message:'请输入描述'}]" >
                <el-input v-model="dialogForm.description" autocomplete="off" />
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="ok">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive,watch} from 'vue'
// 引入上传的组件
import  sUpload from "@/components/sUpload/index.vue"
import {ElMessage} from "element-plus"

let dialogForm = reactive({
    name: '',
    class: "",
    age: "",
    city: "",
    degree:"",
    productUrl:"",
    description:"",
    headimgurl:"",
})

// 控制组件显示与隐藏
let dialogFormVisible = ref(false)

// 定义组件以后接收的数据
let props = defineProps({
    // 弹框的标题
    title:{
        type:String,
        default:"添加学员信息"
    },
    // 弹框的类型
    action:{
        type:String,
        default:"add"
    },
    // 弹框的显示隐藏
    modelValue:{
        type:Boolean,
        default:false
    },
    // 数据回显的字段
    reviewData:{
        type:Object,
    }
})
// 声明一个响应式变量，存储需要修改的数据的sId
let sId = ref('')
// 弹窗打开的事件处理函数
let dialogOpen = ()=>{
    // 判断是不是编辑模式 如果是编辑模式，就把数据回显到表单中
    if(props.action === "edit"){
        sId.value = props.reviewData.sId
        // 过滤reviewData中的sId和_id 并且把过滤后的数据赋值给dialogForm 进行显示
        Object.keys(props.reviewData).filter(key => key !== 'sId' && key !== '_id').forEach(key => { dialogForm[key] = props.reviewData[key] })
    }else if(props.action === "add"){
        // 添加操作 
        // 清空表单
    }
    
    }
    // 弹窗关闭的事件处理函数
    let dialogClose = ()=>{
        // 清空表单
        dialogFormRef.value.resetFields()
        dialogFormVisible.value = false
        emit('update:modelValue',dialogFormVisible.value)
    }


// 侦听父组件传递过来的数据中dialogVisible的变化，如果变化了，就同步到当前组件的dialogFormVisible中
watch(()=>props.modelValue,(newVal)=>{
    // 判断props的modelValue的值是否和当前组件的dialogFormVisible的值一样，如果不一样，就同步
    // console.log(newVal);
    if(newVal !== dialogFormVisible.value){
        dialogFormVisible.value = newVal
    }
})

// 声明dialogFormRef来对dialog组件中的表单进行校验
let dialogFormRef = ref()

// 定义组件将来点击确定和取消的时候，触发的方法
let emit = defineEmits(['ok','cancel','update:modelValue'])

// 声明取消的方法
let  cancel = ()=>{
    // 更新父组件中的dialogVisible的值
    dialogFormVisible.value = false
    emit('cancel')
}
// 声明确定的方法
let  ok = ()=>{
    // 调用表单的校验方法
    // console.log(dialogFormRef.value);
    dialogFormRef.value.validate(valid=>{
        dialogFormVisible.value=false
        if(valid){
            // 声明一个对象，用来处理不同操作的不同参数
            let newFormData = {};
            // 判断是添加还是编辑
            if(props.action === "edit"){
                // 编辑操作 需要sId
                newFormData = {...dialogForm,sId:sId.value}
                // console.log(newFormData);
                
                
            }else if(props.action === "add"){
                // 添加操作
                newFormData = {...dialogForm}
            }
            //触发父组件自定义的方法，将参数传递给父组件 传递dialogForm中的数据
            emit('ok',newFormData)
           
        }else{
            ElMessage.error("表单选项填写不正确，请检查")
        }
    })
    
}



</script>